<template>
	<view style="position: relative;">
    <view v-if="showPage" class="main-page" :style="{
          backgroundImage:'url('+staticImgs.topBg+')'
       }">
      <u-navbar leftIconColor="#fff" placeholder @leftClick="backToPage" bgColor="transparent" />

				<view class="report-res-info-box" :style="{
				   backgroundImage:'url('+staticImgs.resBoxBg+')'
				}">
					<view class="row-2">你可能有{{sclData.remarkInfo || ''}}</view>
					<view class="row-3">解锁手册助你全面检测抑郁情绪问题</view>
				</view>

				<view class="scl-group-list-box">
					<view class="tit-img-box">
						<view class="img flex-cc" :style="{backgroundImage: `url(${staticImgs.boxTit})`}" mode="">解锁青少年抑郁双相诊断手册</view>
					</view>
          <view class="subtitle">双相情感障碍量表评详细报告</view>
					<view class="main-wrapper">
						<view class="intro-tit-box">
              免费测
						</view>

						<view class="scl-list">
							<view class="scl-box" v-for="(scl,index) in sclListData" :key="index">
								<view class="name">{{scl.sclName || ''}}</view>
								<view class="num">&times;1</view>
								<view class="price">&yen;&nbsp;{{scl.newOriginalPrice || ''}}</view>
							</view>
						</view>

						<view class="scl-more-info">
							<template>
								<!--<view class="info-item">
									<view class="label">测评原价</view>
									<view class="price">￥{{priceObj.sumPrice || ''}}</view>
								</view>-->
								<view class="info-item">
									<view class="label">优惠减免</view>
									<view class="del-price">-&yen;&nbsp;{{priceObj.deratePrice || '0'}}</view>
								</view>
							</template>

							<view class="info-item">
								<view class="label bold-label">限时特价</view>
								<view class="price bold-price">&yen;&nbsp;{{priceObj.price || ''}}</view>
							</view>

						</view>
          <!-- scl-more-inof  end -->

			<view class="button-wrapper" @click="toOrderPay">
				<image class="img" :src="staticImgs.btnImg" mode="widthFix"></image>
			</view>

		</view>

      </view>

    </view>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	export default {
		data() {
			return {
				staticImgs: {
					topBg: this.imgBaseURL + '/scl/checkup-depressed/new_paypage_bg.png',
					boxTit: this.imgBaseURL + '/scl/checkup-depressed/new_paypage_titbg1.png',
          btnImg: this.imgBaseURL + '/scl/checkup-mental/to-pay-btn.png',
					resBoxBg: this.imgBaseURL + '/scl/checkup-depressed/new_paypage_tipbg.png',
					resInfoBoxBg: this.imgBaseURL + '/scl/checkup-depressed/pay-page-res-info-bg.png',
          degressBg: this.imgBaseURL + '/scl/checkup-depressed/v2/degress-bg.png',
          tit: this.imgBaseURL + '/scl/checkup-depressed/v2/tit-new-v2.png'
				},
				sclListData: [],
				sclId: '',
				payGroupId: '',
				sclData: {},
				showPage: false,
				priceObj: {
					deratePrice: 0,
					price: 0,
					sumPrice: 0,
				},
				tipsList: [],
				currentTipIndex: 0,
				currentTipKey: '',
				currentTime: '',
				createTime: '',
			}
		},
		computed: {
			...mapGetters('user', ['nickName'])
		},
    async onLoad(opts) {
      this.sclId = opts.sclId
      this.reportId = opts.reportId
      this.opts = opts
      this.payGroupId = this.sclId
			this.$u.api.getDepressionList().then(({
				data: res
			}) => {
				const {
					sclExaminationBOS,
					sclId
				} = res.data
				this.payGroupId = sclId||this.sclId

				console.log(sclExaminationBOS, '===sclExaminationBOS==')
				console.log(this.sclId, '=====this.sclId====')
				const tmpSclData = sclExaminationBOS.find(item => item.sclUid == this.sclId)
				this.sclData = tmpSclData
				// console.log(tmpSclData,'===tmpSclData')
				this.sclListData = sclExaminationBOS

				this.priceObj.deratePrice = res.data.deratePrice
				this.priceObj.price = res.data.price
				this.priceObj.sumPrice = res.data.sumPrice

				this.createTime = res.data.createTime
				this.currentTime = this.$dayjs().format('YYYY.MM.DD')
				this.showPage = true
			})
		},
		methods: {
			toOrderPay() {
				if(this.$fangBaoClick())return
				if (this.pageLoading) return
				const submitForm = this.$removeEmptyProperty({
					orderType: '12',
					sclId: this.payGroupId
				})
				const that = this
				this.pageLoading = true
				this.$u.api.addLog({
					sclId: this.payGroupId,
					sourseType: 1
				})
				this.$u.api.orderPay(submitForm).then(res => {
					if (res.data.code == 200) {
						uni.requestPayment({
							provider: 'wxpay',
							service: 5,
							orderInfo: res.data.data.wr,
							timeStamp: res.data.data.wr.timeStamp,
							nonceStr: res.data.data.wr.nonceStr,
							package: res.data.data.wr.packageValue,
							signType: res.data.data.wr.signType,
							paySign: res.data.data.wr.paySign,
							success: function(res) {
								console.log(res, '================= uni.requestPayment - res')
                uni.redirectTo({
                  url: '/subcontractorB/pages/sclResult/sclResult?id=' +
                      that.reportId +
                      '&sclReportType=2'
                })
                that.pageLoading = false
							},
							fail() {
								that.pageLoading = false
							}
						})
					} else {
						that.$showToast(res.data.message);
						that.pageLoading = false
					}
				}).catch(e => {
					that.pageLoading = false
				})
			},
      backToPage() {
        // 获取是否存在上一页面，如果不存在则返回到测评大厅
        const pages = getCurrentPages()
        if (pages.length === 1) {
          uni.reLaunch({
            url: '/pages/sclList/sclList'
          })
        } else {
          uni.navigateBack()
        }
      }
		}
	}
</script>

<style lang="scss" scoped>
	.main-page {
		width: 100vw;
    height: 100%;
    background-size: 100% auto;
    background-color: rgba(162, 242, 226, 1);
    background-repeat: no-repeat;
    position: relative;
    min-height: 100vh;
    box-sizing: border-box;

		.intro-tit-box {
			font-family: PingFang-SC, PingFang-SC;
			font-weight: 800;
			font-size: 30rpx;
			color: #326876;
			line-height: 42rpx;
			text-align: left;
			font-style: normal;
			position: relative;
			margin-left: 18rpx;

			margin-bottom: 10rpx;


			&::before {
				width: 8rpx;
				top: 10rpx;
				height: 22rpx;
				background: #326876;
				border-radius: 4rpx;

				content: '';
				position: absolute;
				left: -18rpx;
			}
		}

		.scl-list {
			display: flex;
			flex-direction: column;
			row-gap: 20rpx;
			padding-bottom: 30rpx;
			border-bottom: 1rpx dashed #979797;
			margin-top: 18rpx;

			.scl-box {
				display: flex;
				align-items: center;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #326876;
				font-style: normal;

				.name {
					width: 434rpx;
				}

				.num {
					width: 28rpx;
				}

				.price {
					flex: 1;
					text-align: right;
				}
			}
		}

		.scl-more-info {
			display: flex;
			flex-direction: column;
			row-gap: 14rpx;
			padding-top: 24rpx;


			.info-item {
				display: flex;
				align-items: center;

				.label {
					width: 400rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #326876;
					line-height: 40rpx;
					text-align: left;
					font-style: normal;
				}

				.price {
					flex: 1;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #326876;
					line-height: 40rpx;
					text-align: right;
					font-style: normal;
				}

				.del-price {
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #F90101;
					line-height: 40rpx;
					text-align: right;
					font-style: normal;
					flex: 1;
				}

				.bold-label {
					font-family: PingFang-SC, PingFang-SC;
					font-weight: bold;
					font-size: 28rpx;
					color: #326876;
					line-height: 40rpx;
					font-style: normal;
				}

				.bold-price {
					font-family: PingFang-SC, PingFang-SC;
					font-weight: bold;
					font-size: 40rpx;
					color: #326876;
					line-height: 56rpx;
					text-align: right;
					font-style: normal;
				}

			}

		}


		.scl-group-list-box {
			width: 660rpx;
			background: linear-gradient(180deg, #EEFFFB 0%, #FFFFFF 45%, #FFFFFF 100%);
      box-shadow: 0 6rpx 20rpx 0 #A0E9DA;
			border-radius: 24rpx;
			position: relative;
			margin: auto;
      padding-bottom: 23rpx;
		}

		.report-res-info-box {
			width: 660rpx;
			height: 216rpx;
			background-size: 100% 100%;
			background-repeat: no-repeat;
			margin: auto;
			margin-bottom: 64rpx;
      margin-top: 284rpx;

			.row-2 {
				font-family: PingFangSC, PingFang SC;
        font-weight: bold;
				font-size: 48rpx;
				color: #0C473B;
        line-height: 67rpx;
				text-align: center;
				font-style: normal;
        letter-spacing: 2rpx;
				background-size: 100% 100%;
				background-repeat: no-repeat;
				margin: auto;
				padding-top: 33rpx;
        padding-bottom: 22rpx;
			}

			.row-3 {
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 32rpx;
				color: #064F44;
				line-height: 62rpx;
				text-align: center;
				font-style: normal;
				width: 591rpx;
				height: 62rpx;
				background: rgba(255, 255, 255, .57);
				box-shadow: inset 0rpx 1rpx 10rpx 0rpx rgba(146, 231, 216, .57);
				border-radius: 31rpx;
				margin: auto;
			}

		}


		.tit-img-box {
			left: 50%;
			top: -10rpx;
			transform: translateX(-50%);

			width: 524rpx;
			height: 62rpx;
			position: absolute;

			.img {
				width: 100%;
				height: 100%;
        font-weight: bold;
        font-size: 32rpx;
        color: #326876;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-position: center center;
			}
		}

		.main-wrapper {
			width: 581rpx;
			margin: auto;
			// margin-bottom: calc(100rpx + constant(safe-area-inset-bottom));
			// margin-bottom: calc(100rpx + env(safe-area-inset-bottom));      
			// padding-top: 64rpx;
			padding-top: 30rpx;
      border-top: 2rpx dashed #979797;

			.intro-tit-box {
				font-family: PingFang-SC, PingFang-SC;
				font-weight: 800;
				font-size: 30rpx;
				color: #326876;
				line-height: 42rpx;
				text-align: left;
				font-style: normal;
				position: relative;
				margin-left: 18rpx;

				margin-bottom: 10rpx;

				&::before {
					width: 8rpx;
					top: 10rpx;
					height: 22rpx;
					background: #326876;
					border-radius: 4rpx;

					content: '';
					position: absolute;
					left: -18rpx;
				}
			}

      .button-wrapper {
        width: 330rpx;
        height: 90rpx;
        position: fixed;
        left: 50%;
        transform: translateX(-50%);
        bottom: 58rpx;
        // bottom: calc(50rpx + constant(safe-area-inset-bottom));
        // bottom: calc(50rpx + env(safe-area-inset-bottom));

        .img {
          width: 100%;
          height: 100%;
        }
      }
		}


	}

	.btn-base {
		width: 270rpx;
		height: 70rpx;
		border-radius: 45rpx;

		font-family: PingFang-SC, PingFang-SC;
		// font-weight: bold;
		font-size: 32rpx;
		color: #FFFFFF;
		line-height: 70rpx;
		text-align: center;
		font-style: normal;
	}

	.btn-normal {
		background: #5ED5FF;
	}

  .subtitle {
    font-weight: bold;
    font-size: 34rpx;
    color: #326876;
    line-height: 48rpx;
    width: 581rpx;
    padding-bottom: 30rpx;
    text-align: center;
    margin: 0 auto;
    padding-top: 74rpx;
  }
</style>